<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <button id="btn2">按钮2</button>
    <script>
        /*
            dom0事件处理（比较多）
                **同一个事件，如果添加多，后一个会覆盖前一个

            dom2事件处理
                **同一个事件，事件处理函数可以添加多个

                  ****添加事件监听--添加一个事件
                 addEventListener(事件名，事件处理函数)
                 removeEventListener(事件名，事件处理函数-名字)
                    **一般需要移出事件的话，在添加事件或者绑定事件的时候 会给事件处理函数顶一个名字
        */
        var btn = document.querySelector("#btn");
        //  add（添加） event（事件）  lisntener（监听者，监听器，监听）
        // ****添加事件监听--添加一个事件
        /* 
            参数 1--事件名--字符串
            参数 2--事件处理函数--匿名函数或者是函数名
                    事件处理函数中也可以使用this 关键字--指的是 给谁添加的事件 this就是谁
        */
        // var fn0 = function () {
        //     console.log('点击了按钮');
        //     console.log(this);
        // }
        // btn.addEventListener('click', fn0)

        btn.addEventListener('click', function () {
            console.log('点击了按钮');
            console.log(this);

        })

        function fn() {
            console.log('点击了按钮 222');
            console.log(this);
        }
        btn.addEventListener('click', fn)



        // **同一个事件，如果添加多，后一个会覆盖前一个
        var btn2 = document.querySelector('#btn2')
        btn2.onclick = function () {
            console.log('btn2 click 1');
        }
        btn2.onclick = function () {
            console.log('btn2 click 2');
        }


        // dom2删除事件---
        // 参数1- 事件名
        // 参数2- 函数名（之前添加的事件处理函数的名字）

        btn.removeEventListener('click', fn)
        // btn.removeEventListener('click', fn0)

    </script>

</body>

</html>